<template>
  <div class="musbox">
    <!-- 面包屑导航 -->
    <div class="musbread">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/' }">博物馆</el-breadcrumb-item>
        <el-breadcrumb-item>活动列表</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 图片切换 -->
    <MyPic></MyPic>
    <!-- 博物馆秘密头部 -->
    <MySecret></MySecret>
    <!-- 展示图片 -->
    <div class="imgbox">
      <div class="imgs">
        <MyImg :imgs="item" v-for="(item, i) in imgs" :key="i"></MyImg>
      </div>
    </div>
    <!-- 底部图片 -->
    <div class="btnpic">
      <div class="buttonPic">
        <div class="footbox">
          <MyButton :pics="item" v-for="(item,i) in pics" :key="i"></MyButton>
        </div>
      </div>
    </div>
  </div> 
</template>
<script>
import MyPic from "../../components/ll/musPic";
import MySecret from "../../components/ll/musSecret";
import MyImg from "../../components/ll/musImg";
import MyButton from "../../components/ll/musButton";
export default {
  components:{
       MyPic,
       MySecret,
       MyImg,
       MyButton
    },
  data(){
    return{
      imgs:[
        {name:"图片一",pic:"img1.jpg"},
        {name:"图片二",pic:"img2.jpg"},
        {name:"图片三",pic:"img3.jpg"},
        {name:"图片四",pic:"img4.jpg"},
        {name:"图片五",pic:"img1.jpg"},
        {name:"图片六",pic:"img2.jpg"},
        {name:"图片七",pic:"img3.jpg"},
        {name:"图片八",pic:"img4.jpg"},
        {name:"图片八",pic:"img1.jpg"},
        {name:"图片九",pic:"img2.jpg"}
      ],
      pics:[
        {pno:1,pic:'b1.jpg'},
        {pno:2,pic:'b2.jpg'},
        {pno:3,pic:'b3.jpg'},
        {pno:4,pic:'b4.jpg'}
      ]
    }
  }     
    
}
</script>
<style scoped>
  .musbox{
    margin-top:8%;
  }
  .musbread{
    margin-left:4rem;
  }
  .imgs{
    width:90%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .imgbox{
    width: 100%;
    display: flex;
    justify-content: center;
  }
  .footbox{
    margin-top:1rem;
    margin-bottom: 1rem;
    width:100%;
    display: flex;
    justify-content: space-around;
  }
  .buttonPic{
    width:90%;
    border-radius: 4px;
    background-color: rgba(161, 159, 159, 0.6);
  }
  .btnpic{
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top:3rem;
    margin-bottom:2rem;
  }

</style>